<template>
  <div class="root">
<!--    <div class="title">班级管理</div>-->
    <div class="add-class">
      <el-button plain @click="toggleDialog">
        创建班级
      </el-button>
      <ClassCreate :dialogFormVisible="dialogFormVisible" @closeFormVisible="closeFormVisible"></ClassCreate>
    </div>
    <div class="manage-class">
      <button v-for="(item,key) in CLASS_MANAGER_MENU" :key="key"
              @click="selectComponent(item.name)"
              :class="{ active: isActive(item.component) }"
      >
        {{item.title}}
      </button>
    </div>
    <div class="content">
<!--      keep-alive做一下缓存，子组件不会频繁的销毁重建，这个根据需求来定是否缓存-->
      <keep-alive>
        <component :is="currentComponent"></component>
      </keep-alive>
    </div>

  </div>
</template>

<script setup>
import {CLASS_MANAGER_MENU} from "@/enum/class/enmu-class-manager-menu.js";
import ClassCreate from "@/components/class/class-info/ClassCreate.vue"
import {markRaw, onMounted, ref} from "vue";
import ClassManager from "@/components/class/ClassManager.vue";


// const currentComponent = ref(markRaw(DefaultClassManager)); // 默认显示的组件
const currentComponent = ref(markRaw(ClassManager)); // 默认显示的组件
const selectComponent = (componentName) => {
  CLASS_MANAGER_MENU.forEach((item,index)=>{
    if(componentName===item.name){
      currentComponent.value = markRaw(item.component);
    }
  })
};
const isActive = (component) => {
  return currentComponent.value === component;
};

const dialogFormVisible = ref(false);
const toggleDialog = () => {
  dialogFormVisible.value = true;
};

const closeFormVisible = ()=>{
  dialogFormVisible.value = false;
}
// 点击班级管理以后，网络请求班级列表


</script>

<style scoped lang="less">
.root{
  padding-top: 20px;
  .add-class{
    text-align: right;
    float: right;
    button{
      width: 100px;
      height: 40px;
      line-height: 40px;
      background-color: #fff;
      border: 1px solid #ccc;
      border-radius: 14px;
      font-weight: bold;
      color: #333;
      font-size: 14px;
      &:hover{
        color:#00c9bb;
      }
    }
  }
  .manage-class{
    text-align: left;
    padding-right: 100px;
    button{
      width: 100px;
      height: 40px;
      margin-right: 20px;
      line-height: 40px;
      background-color: #fff;
      border: 1px solid #ccc;
      border-radius: 14px;
      font-weight: bold;
      color: #333;
      font-size: 14px;
    }
    // 活跃的菜单栏的样式
    .active {
      background-color: #00c9bb;
      color: white;
      font-weight: bold;
      border-radius: 10px;
    }
  }
}
</style>